<!--
可能更适合单独使用
-->
<script setup lang="ts">
// 编写专用查询API
import {useDictApi} from '@/core/api/sys/DictUseApi'
import type {Ret} from "@/core/utils/request";
import type {AxiosResponse} from "axios";
import {onMounted, onUpdated, ref} from "vue";
import {message} from "ant-design-vue";
// 根据传入的字典code，查询出来字典
const {dictCode} = defineProps(["dictCode"])
const {listOptionsByCode} = useDictApi()
const emit = defineEmits<(e: "update:value", value: string) => void>()
// 查询字典
const options = ref([])
// onMounted(() => {
  listOptionsByCode(dictCode).then((res: AxiosResponse | Ret) => {
    if (res.code == 0) {
      options.value = res.data
      //默认选中
      console.log("默认选中：", selected.value)
      // console.log("默认选中：")
      if (selected.value == null || selected.value == "") {
        selected.value = options.value[0].value
        emit("update:value", options.value[0].value)
        console.log("变化了")
      }
    } else {
      console.error(`${dictCode} 字典查询失败！`)
      message.error(`${dictCode} 字典查询失败！`)
    }
  })
// })
// 双向绑定form表单的数据
const selected = ref("")
// 初始化的时候回显
</script>

<template>
  <a-select
      ref="select"
      v-model:value="selected"
      style="width: 120px"
      :options="options"
      @change="emit('update:value', selected)"
  ></a-select>
</template>

<style scoped>

</style>